<template>
    <div class="app-container">
     <searchForm
       :formOptions="formOptions"
       @onSearch="onSearch"
       @onReset="onReset"
       :formLabelWidth="formLabelWidth"
       v-show="showSearch"
     />
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="warning"
           plain
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
         >导出</el-button>
         <!-- v-hasPermi="['dailyroutine:holidays:export']" -->
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column label="学生姓名" prop="studentName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="注册号" prop="registerCode"  :show-overflow-tooltip="true" align="center" />
        <el-table-column label="年级名称" prop="gradeName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="班级名称" prop="className" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="节假日类型" prop="holidayType"  :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
                <dict-tag :options="dict.type.holiday_type" :value="scope.row.holidayType"></dict-tag>
            </template>
        </el-table-column>
        <el-table-column label="出发时间" prop="goDate" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="返回时间" prop="returnDate" :show-overflow-tooltip="true" align="center" />
        <!-- <el-table-column label="节假日去向省市区" prop="goPlace" :show-overflow-tooltip="true" align="center" /> -->
        <el-table-column label="节假日去向详细地址" prop="goAddress" :show-overflow-tooltip="true" align="center" />
        <!-- <el-table-column label="学生确认状态" prop="stuConfirm" :show-overflow-tooltip="true" align="center" width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.stuConfirm == '0'" type="info">未确认</el-tag>
                <el-tag v-else-if="scope.row.stuConfirm == '1'" type="success">确认返校</el-tag>
                <el-tag v-else-if="scope.row.stuConfirm == '2'" type="warning">确认未返校</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="老师确认状态" prop="confirm" :show-overflow-tooltip="true" align="center" width="120">
            <template slot-scope="scope">
                <el-tag v-if="scope.row.confirm == '0'" type="info">未确认</el-tag>
                <el-tag v-else-if="scope.row.confirm == '1'" type="success">确认返校</el-tag>
                <el-tag v-else-if="scope.row.confirm == '2'" type="warning">确认未返校</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="success"
                    icon="el-icon-check"
                    @click="handleConfirm(scope.row, '1')"
                    :disabled="scope.row.stuConfirm != '1'"
                    v-hasPermi="['dailyroutine:holidays:confirm']"
                >确认返校</el-button>
                <el-button
                    size="mini"
                    type="warning"
                    icon="el-icon-close"
                    @click="handleConfirm(scope.row, '2')"
                    :disabled="scope.row.stuConfirm != '1'"
                    v-hasPermi="['dailyroutine:holidays:confirm']"
                >确认未返校</el-button>
            </template> -->
        <!-- </el-table-column> -->
     </el-table>
     <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
    </div>
 </template>
 
 <script>
 import searchForm from "@/components/Search/searchForm.vue";
 import { 
    holidaysList,
    confirmReturn,
    exportHolidays
  } from "@/api/dailyroutine/holidays.js";
 export default {
     name:"holidaysList",
     components: { 
        searchForm
     },
     dicts: ["holiday_type"],
     data () {
         return{
             formLabelWidth: "90px",
             formOptions: [
                 {
                     label: "学生姓名",
                     prop: "studentName",
                     element: "el-input",
                     placeholder: "请输入学生姓名"
                 },
                 {
                     label: "注册号",
                     prop: "registerCode",
                     element: "el-input",
                     placeholder: "请输入注册号"
                 },
                //  {
                //      label: "节假日去向省市区",
                //      prop: "goPlace",
                //      element: "el-input",
                //      placeholder: "请输入节假日去向省市区"
                //  },
                //  {
                //      label: "节假日去向详细地址",
                //      prop: "goDetail",
                //      element: "el-input",
                //      placeholder: "请输入节假日去向详细地址"
                //  }
             ],
             // 显示搜索条件
             showSearch: true,
             // 查询参数
             queryParams: {
                pageNum: 1,
                pageSize: 10,
                goPlace: undefined,
                goDetail: undefined
             },
             tableData: [],
             // 遮罩层
             loading: true,
             // 导出遮罩层
             exportLoading: false,
             total: 0
         }
     },
     computed:{
     
     },
     created(){
         this.getList()
     },
     methods:{
         onSearch(val) {
             // 查询条件和分页数据合并
             this.queryParams = Object.assign(this.queryParams, val);
             this.getList();
         },
          // 重置
         onReset(data) {
             this.queryParams = Object.assign(this.queryParams, data);
             this.getList();
         },
         getList () {
            this.loading = true;
            holidaysList(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.loading = false;
                this.total = res.total
            })
         },
         // 确认返校状态
         handleConfirm(row, confirmStatus) {
             const text = confirmStatus === '1' ? '确认返校' : '确认未返校';
             this.$modal.confirm('是否' + text + '？').then(() => {
                 return confirmReturn({
                     id: row.id,
                     confirm: confirmStatus
                 });
             }).then(() => {
                 this.getList();
                 this.$modal.msgSuccess(text + '成功');
             }).catch(() => {});
         },
         // 导出按钮操作
         handleExport() {
             this.$modal.confirm('是否确认导出所有节假日去向数据项？').then(() => {
                 this.exportLoading = true;
                 return exportHolidays(this.queryParams);
             }).then(response => {
                 // 使用原生方式下载文件
                 const blob = new Blob([response], {
                     type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                 });
                 const url = window.URL.createObjectURL(blob);
                 const link = document.createElement('a');
                 link.href = url;
                 link.download = '节假日去向数据.xlsx';
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
                 window.URL.revokeObjectURL(url);
                 this.exportLoading = false;
                 this.$modal.msgSuccess('导出成功');
             }).catch(() => {
                 this.exportLoading = false;
             });
         }
     }
 }
 </script>
 
 <style>
 
 </style>